<template>
  <div>
    
    <div class="skl_option"> 
      <!--导航栏 -->
      <div class="navbar swiper-wrapper">
		<div class="skl_nav">
			<div class="skl_icon" @click="retreat">
				<van-icon name="arrow-left" />
			</div>
			<div class="skl_title">
				限时秒杀
			</div>
			<!-- <van-nav-bar
			  left-text=""
			  left-arrow
			  fixed
			  @click-left="retreat"
			/> -->
		</div>
				
        <ul>
		  <li v-for="(item,i) in seckillTimes" :class="{pitch:istrue==i}" @click="pointInTime(i)" :key="i">
            {{item | timeNavInit}}
            <span>{{i===0?'抢购中':'即将开始'}}</span>
          </li>

        </ul>

      </div>
    </div>
    <comList :seckTime="seckTime" :isFailure="isFailure"></comList>
  </div>
</template>

<script>
  import comList from './commodityList.vue'; 
  export default {
    name: "MemberContainer",
    data() {
      return {
        seckillTimes: [],
        istrue: 0,//选项卡。判断
		seckTime:0,
		isFailure:0,
      }
    },
    created() {
      this.$store.state.headSource = "seckill"
    },
    mounted() {
      this.getNavbarRef();
    },
	filters:{
		timeNavInit(timestamp){
			var h = new Date(timestamp).getHours();
			return (h-10)<0?`0${h}:00` : `${h}:00`;
		}
	},
    methods: {
      // 选项卡
      getNavbarRef() {
		//根据时间戳进行判断
		let date = new Date();
		let dn = Date.now();//当前时间戳
		var Htimestamp = 60*60*1000;//1小时时间戳
		let tiems = [];
		for(var i=0;i<24;i++){
			tiems.push(dn)
			dn += Htimestamp
		}
		this.seckillTimes = tiems;
      },
      //选项卡选择
      pointInTime(i) {
        let _this = this;
		//导航栏切换
        _this.istrue = i;
		//点击信息
		this.seckTime = this.seckillTimes[i];
		let date = new Date();
		this.isFailure = i;
		
      },
	  //后退
	  retreat() {
	  	if (window.history.length <= 1) {
	  		this.$router.push({path:'/'})
	  	} else {
	  		this.$router.go(-1);
	  	}
	  },
	  
    },
    components: {
      comList,
    }
  }
</script>

<style lang="scss" scoped>
	// 导航
	.skl_nav{
		    top: 0;
		    left: 0;
		    width: 100%;
		    position: fixed;
			line-height: 46px;
			user-select: none;
			text-align: center;
			color: white;
			z-index: 100;
			background:#FF1B28;
			background-image: linear-gradient(to right, #FF1B28 0, #FF1B6B 100%);
		.skl_icon{
			    bottom: 0;
				left: 7px;
			    font-size: 23px;
			    position: absolute;	   
		}
		.skl_title{
			    margin: 0 auto;
			    font-size: 16px;
			    font-weight: 500;
		}
	}
	
	[class*='van-hairline']::after {
		border: 1px solid #007AFF;
	}
	
  .skl_option {
    height: 110px;
    background-image: linear-gradient(to right, #FF1B28 0, #FF1B6B 100%);
    border-bottom-left-radius: 23%;
    border-bottom-right-radius: 23%;
	margin-top: 45px;
  }

  // 导航栏
  .navbar {
    box-sizing: border-box;
    .slide {
      display: block;
      font-size: 12px;
      line-height: 12px;
    }

    ul {
      overflow-y: hidden;
      overflow-x: scroll;
      display: flex;
      //基线对齐
      align-items: baseline;
    }

    ul::-webkit-scrollbar {
      display: none;
    }

    li {
      min-width: 80px;
      text-align: center;
      color: #DF8BB1;
      font-size: 17px;
      // cursor: pointer;
    }

    li>span {
      display: block;
      font-size: 12px;
      line-height: 12px;
    }

    // 选中样式
    .pitch {
      color: white;
      font-size: 23px;
      span {
        line-height: 18px;
      }

    }
  }
</style>
